function init() {
    var b2Vec2 = Box2D.Common.Math.b2Vec2;
    var b2AABB = Box2D.Collision.b2AABB;
    var b2BodyDef = Box2D.Dynamics.b2BodyDef;
    var b2Body = Box2D.Dynamics.b2Body;
    var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
    var b2Fixture = Box2D.Dynamics.b2Fixture;
    var b2World = Box2D.Dynamics.b2World;
    var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
    var b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
        b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
        b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef;

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    var worldScale = 30;

    var world = new b2World(new b2Vec2(0, 10), true);

    var canvasPosition = getElementPosition(canvas);

    {
        var fixDef = new b2FixtureDef;
        fixDef.density = 1.0;
        fixDef.friction = 0.5;
        fixDef.restitution = 0.2;

        var bodyDef = new b2BodyDef;

        bodyDef.type = b2Body.b2_staticBody;
        fixDef.shape = new b2CircleShape(5);

        bodyDef.userData = null;
        bodyDef.position.Set(10, 7);

        var _centerArch = world.CreateBody(bodyDef);

        _centerArch.CreateFixture(fixDef);

        context.strokeStyle = "#008FFF;"
        context.beginPath();
        context.arc(300, 210, 150, 0, 2 * Math.PI);
        context.stroke();
    }

    debugDraw();

    window.setInterval(update, 1000 / 60);


    var jd = new b2RevoluteJointDef();


    document.addEventListener("mousedown", function(e) {
        var _i = new Image(),
            _rdm = Math.ceil(Math.random() * 41);

        _i.src = "./asset/stone1.png";
        // _i.src = "./asset/" + data[_rdm];

        createBox(64, 64, e.clientX - canvasPosition.x, e.clientY - canvasPosition.y, b2Body.b2_dynamicBody, _i);
    });

    function createBox(width, height, pX, pY, type, data) {

        var bodyDef = new b2BodyDef;
        bodyDef.type = type;

        bodyDef.position.Set(9.8, 2);

        bodyDef.userData = data;
        var circleShape = new b2CircleShape(1);
        var fixtureDef = new b2FixtureDef;
        fixtureDef.density = 1.0;
        fixtureDef.friction = 1.1;
        fixtureDef.restitution = 1.1;
        fixtureDef.shape = circleShape;


        var body = world.CreateBody(bodyDef);
        body.CreateFixture(fixtureDef);

        var revoluteJointDef = new b2RevoluteJointDef();
        revoluteJointDef.Initialize(_centerArch, body, new b2Vec2(10, 7));
        revoluteJointA = world.CreateJoint(revoluteJointDef);
    }

    function debugDraw() {
        var debugDraw = new b2DebugDraw();
        debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
        debugDraw.SetDrawScale(30.0);
        debugDraw.SetFillAlpha(0.0);
        debugDraw.SetLineThickness(0.8);

        debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
        world.SetDebugDraw(debugDraw);
    }

    function update() {
        world.Step(1 / 60, 10, 10);
        world.DrawDebugData();
        context.beginPath();
        context.arc(300, 210, 150, 0, 2 * Math.PI);
        context.stroke();
        for (var b = world.m_bodyList; b != null; b = b.m_next) {
            if (b.GetUserData()) {
                context.save();
                // debugger;
                context.translate(b.GetPosition().x * worldScale, b.GetPosition().y * worldScale);
                context.rotate(b.GetAngle());

                // context.drawImage(b.GetUserData(), 0, 0, 50, 50, -b.GetUserData().width / 2, -b.GetUserData().height / 2, 60, 60);

                context.drawImage(b.GetUserData(), 0, 0, 50, 50, b.GetPosition().x, b.GetPosition().y, 60, 60);

                // context.drawImage(b.GetUserData(), 0, 0, 50, 50, -b.GetUserData().width / 2, -b.GetUserData().height / 2, 60, 60);
                context.restore();
            }
        }

        world.ClearForces();
    };

    //http://js-tut.aardon.de/js-tut/tutorial/position.html
    function getElementPosition(element) {
        var elem = element,
            tagname = "",
            x = 0,
            y = 0;
        while ((typeof(elem) == "object") && (typeof(elem.tagName) != "undefined")) {
            y += elem.offsetTop;
            x += elem.offsetLeft;
            tagname = elem.tagName.toUpperCase();
            if (tagname == "BODY") {
                elem = 0;
            }
            if (typeof(elem) == "object") {
                if (typeof(elem.offsetParent) == "object") {
                    elem = elem.offsetParent;
                }
            }
        }
        return {
            x: x,
            y: y
        };
    }

};
